<template>
  <div class="ai-introduction-page">
    <div class="title-image">
      <img :src="haixiaomiaoAiImg" alt="海小喵AI" />
    </div>
    <div class="welcome-text">
      <h1 class="main-title">Hi,我是嗨喵AI智能助手~</h1>
      <p class="subtitle">很高兴为您服务!如果您在大屏互动方面有任何疑问或需求,欢迎随时与我对话。</p>
    </div>
    
    <div class="features-section">
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="zxsxImg" alt="最新上线" />
        </div>
        <div class="feature-text">最新上线</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="dpsyImg" alt="大屏使用" />
        </div>
        <div class="feature-text">大屏使用</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="hdgnImg" alt="互动功能" />
        </div>
        <div class="feature-text">互动功能</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="hdyxImg" alt="互动游戏" />
        </div>
        <div class="feature-text">互动游戏</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="tgsyImg" alt="提高收益" />
        </div>
        <div class="feature-text">提高收益</div>
      </div>
      <div class="feature-card">
        <div class="feature-icon">
          <img :src="gdImg" alt="更多" />
        </div>
        <div class="feature-text">更多</div>
      </div>
    </div>
    
    <div class="tip-text">
      电脑端可登录嗨喵后台<span class="website-link">hudongmiao.com</span>同步历史聊天
    </div>
    
    <div class="button-section">
      <button class="action-button" @click="handleGoNow">
        立即前往
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useDialogConversationStore } from "@/stores/dialogConversationStore"
import haixiaomiaoAiImg from '@/assets/icons/haixiaomiao-ai.png'
import zxsxImg from '@/assets/icons/zxsx.png'
import dpsyImg from '@/assets/icons/dpsy.png'
import hdgnImg from '@/assets/icons/hdgn.png'
import hdyxImg from '@/assets/icons/hdyx.png'
import tgsyImg from '@/assets/icons/tgsy.png'
import gdImg from '@/assets/icons/gd.png'

// AI介绍页面
// 移动端页面 - 基于750px设计稿，px会自动转换为vw

const router = useRouter()
const dialogConversationStore = useDialogConversationStore()

const handleGoNow = () => {
  // 重置对话状态为初始状态，就像新对话一样
  dialogConversationStore.currentConversationId = ''
  dialogConversationStore.currentConversationIndex = -1
  router.push({ name: 'MobileChat' })
}
</script>

<style lang="scss" scoped>
// 移动端样式 - 基于750px设计稿
// 所有的 px 单位会被自动转换为 vw

.ai-introduction-page {
  width: 750px;
  min-height: 100vh;
  background: linear-gradient(180deg, #C8E5FF 0%, rgba(255, 255, 255, 0.8873) 32%, rgba(213, 233, 254, 0.7841) 49%, rgba(234, 244, 255, 0.763) 77%, rgba(218, 228, 249, 0) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.title-image {
  width: auto;
  height: 320px;
  margin-top: 40px;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.welcome-text {
  margin-top: 30px;
  text-align: center;
  padding: 0 40px;
  
  .main-title {
    font-size: 38px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 30px 0;
    line-height: 1.2;
  }
  
  .subtitle {
    font-size: 30px;
    color: #6F6F6F;
    margin: 0;
    line-height: 1.5;
    font-weight: normal;
    text-align: left;
  }
}

.features-section {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  
  .feature-card {
    width: 326px;
    background: #ffffff;
    padding: 36px 0px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    .feature-icon {
      width: 82px;
      height: 82px;
      background: #4A90E2;
      border-radius: 50%;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    
    .feature-text {
      font-size: 30px;
      color: #6F6F6F;
      font-weight: bold;
    }
  }
}

.tip-text {
  margin-top: 20px;
  text-align: center;
  font-size: 22px;
  color: #6F6F6F;
  
  .website-link {
    color: #486FFF;
  }
}

.button-section {
  margin-top: 20px;
  //margin-bottom: 40px;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  
  .action-button {
    width: 678px;
    height: 96px;
    background: linear-gradient(270deg, #486FFF 0%, #56A5EE 100%);
    border: none;
    border-radius: 35px;
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    cursor: pointer;
    
  }
}
</style>

